<!-- eslint-disable vue/valid-v-for -->
<!-- 关联车辆 -->
<template>
  <a-modal
    v-model:visible="showModal"
    :mask-closable="false"
    title="批量确认"
    @cancel="onClose"
    @before-ok="onConfirm"
    width="45vw"
    unmount-on-close
  >
    <div class="section-item gray">
      <div class="section-item-content">
        <a-descriptions :size="size" :align="{ label: 'right' }">
          <a-descriptions-item label="合计流水数量">{{ record.recordSize }}</a-descriptions-item>
          <a-descriptions-item label="合计收款金额(元)">{{ unitVal(record.receiveAmount, '元') }}</a-descriptions-item>
          <a-descriptions-item label="合计付款金额(元)">{{ unitVal(record.payRecordAmount, '元') }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
  import { unitVal } from '@/utils'
  import { ref, onMounted } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { batchConfirm } from '@/api/finance/turnover'

  const record = ref({})
  const idList = ref([])
  const showModal = ref(false)

  const show = (data, keys) => {
    showModal.value = true
    record.value = data
    idList.value = keys
  }

  const onClose = () => {
    showModal.value = false
  }

  const emit = defineEmits(['save'])

  const onConfirm = (done) => {
    Modal.confirm({
      title: '提示',
      simple: true,
      cancelText: '取消',
      okText: '确认',
      content: '确认提交？',
      onOk: () => {
        const param = {
          idList: idList.value,
        }
        batchConfirm(param).then(() => {
          Message.success('操作成功')
          emit('save')
          showModal.value = false
          done()
          resolve()
        })
      },
    })
    return false
  }

  defineExpose({
    show,
  })

  onMounted(() => {})
</script>

<style lang="less" scoped>
  .page-form {
    margin: 0;
    height: 300px;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
</style>
